<template>
  <el-select
    v-model="inputVal"
    clearable
    @clear="clear"
    :disabled="isReadonly"
    :placeholder="isReadonly ? '' : `请选择${config.name}`"
  >
    <el-option
      :label="config.config.label"
      :value="config.config.value"
      class="options"
    >
      <el-tree
        :accordion="true"
        :data="config.options"
        :props="config.config"
        @node-click="handleNodeClick"
      ></el-tree>
    </el-option>
  </el-select>
</template>
<script>
export default {
  props: {
    config: Object,
    isReadonly: {
      type: Boolean,
      default: false,
    },
    formData: Object,
  },
  data() {
    return {
      inputVal: null,
    };
  },
  computed: {
    curVal() {
      if (
        this.formData.constructor == Object &&
        this.formData.hasOwnProperty(this.config.prop.label)
      ) {
        return this.formData[this.config.prop.label];
      } else {
        return "";
      }
    },
  },
  watch: {
    curVal: {
      immediate: true,
      deep: true,
      handler(val) {
        this.inputVal = val;
      },
    },
  },
  created() {},
  methods: {
    clear() {
      this.formData[this.config.config.value] = null;
      this.formData[this.config.config.label] = null;
      this.$emit("update:formData", this.formData);
      this.$emit("change");
    },
    handleNodeClick(data) {
      this.inputVal = data[this.config.config.label];
      this.$emit("change", data[this.config.config.value]);
      this.formData[this.config.prop.value] = data[this.config.config.value];
      this.formData[this.config.prop.label] = data[this.config.config.label];
      this.$emit("update:formData", this.formData);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  padding: 0;
  overflow: hidden;
}
.el-scrollbar__view .el-select-dropdown__item.selected {
  font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
  height: auto;
  padding: 0 20px;
}
.el-tree-node__label {
  font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
  color: #409eff;
  font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
  color: #606266;
  font-weight: normal;
}
</style>
